<template>
  <div>
    <el-drawer :visible.sync="dialogVisible" direction="rtl" size="60%">
      <h3 slot="title">查看用户详细信息</h3>
      <div class="padd20">
        <h4>用户详情</h4>
        <el-table :data="userDoc" style="width: 100%" border>
          <el-table-column prop="id" label="用户ID" />
          <el-table-column prop="nickname" label="昵称" />
          <el-table-column prop="gender" label="性别">
            <template slot-scope="scope">
              {{ {1:'男',2:'女'}[scope.row.gender] }}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="" label="生日" /> -->
          <el-table-column prop="createdate" label="注册时间" />
          <!-- <el-table-column prop="" label="用户来源" /> -->
          <el-table-column label="操作" width="220">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="lookOrder">查看订单</el-button>
            </template>
          </el-table-column>
        </el-table>
        <h4>已购商品</h4>
        <el-card class="box-card" v-for="(e,i) in mybuyList" :key="i">
          <div slot="header" class="clearfix">
            <span>{{e.name}}</span>
          </div>
          <el-table :data="e.products" border>
            <el-table-column prop="product_id" label="商品id" width="80"/>
            <el-table-column prop="name" label="商品名称" />
            <el-table-column prop="price" label="价格" width="80"/>
            <el-table-column prop="ggName" label="商品规格" />
            <el-table-column prop="num" label="数量" width="80"/>
            <el-table-column prop="total_price" label="总价" width="80" />
            <el-table-column label="图片" width="80">
              <template slot-scope="scope">
                <el-image style="width: 50px;height:50px" :preview-src-list="[$http.staticURL + scope.row.img]" :src="$http.staticURL + scope.row.img" fit="fill" />
              </template>
            </el-table-column>
             <el-table-column label="状态" width="150">
              <template slot-scope="scope">
                <el-tag>{{$orderGoodsState[scope.row.state]}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="img" label="操作" width="50">
              <template slot-scope="scope">
                <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link">
                    <i class="el-icon-more-outline" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="whatIclick('start', scope.row)" :disabled="scope.row.state!=2">开始服务</el-dropdown-item>
                    <el-dropdown-item :command="whatIclick('checked', scope.row)" :disabled="scope.row.state!=9">内部验收通过</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
          </el-table-column>
          </el-table>
        </el-card>
       
        <!-- <h4>统计信息</h4>
        <el-table :data="userDoc" border>
          <el-table-column prop="id" label="消费金额" />
          <el-table-column prop="nickName" label="订单数量" />
          <el-table-column prop="nickName" label="退货记录" />
          <el-table-column prop="nickName" label="登录次数" />
        </el-table>
        <h4>消费项目</h4>
        <el-table :data="userDoc" border>
          <el-table-column prop="id" label="消费项目" />
          <el-table-column prop="nickName" label="消费金额" />
        </el-table> -->
        <h4>收货地址</h4>
        <el-table :data="addressList" border>
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="phone" label="手机号" />
          <el-table-column label="详细地址" >
            <template slot-scope="scope">
              {{scope.row.province + scope.row.city + scope.row.town + scope.row.detail}}
            </template>
          </el-table-column>
          <el-table-column label="默认地址" width="80">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.state ==1">是</el-tag>
              <el-tag type="danger" v-if="scope.row.state ==0">否</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <!-- <h4>登录日志</h4>
        <el-table :data="userDoc" border>
          <el-table-column prop="id" label="登录时间" />
          <el-table-column prop="ip" label="IP"/>
          <el-table-column prop="nickName" label="地址" />
        </el-table> -->
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  data() {
    return {
      dialogVisible: false,
      userDoc: [],
      openid: '',
      mybuyList:[],
      addressList:[]
    }
  },
  computed: {
    ...mapState(['$orderGoodsState']),
    queryData(){
      return {
        openid:this.openid,
        state:'2,5,6,7,8,9,10,11,12'
      }
    }
  },
  methods: {
    init(val) {
      this.openid = val.openid
      let arr = [val]
      this.dialogVisible = true
      this.userDoc = arr
      this.getMybuyGoods()
      this.getAddress()
    },
    handleCommand(e) {
      this.order_detail_id = e.data.id
      console.log(this.order_detail_id,'没变？');
      if (e.type === 'start') {
        let obj ={
          openid:this.openid,
          order_detail_id:e.data.id,
          state:9, //待验收
        }
        this.$http.httpPost('/order/orderStateUpdate',obj).then(res=>{
          console.log(res,'开始服务')
          if(res.data.code == 0){
            this.$message.success('已开始服务！')
            this.getMybuyGoods()
          }
        })
      }else if (e.type === 'checked') {
        let obj2 ={
          openid:this.openid,
          order_detail_id:e.data.id,
          state:10, //开始服务
        }
        this.$http.httpPost('/order/orderStateUpdate',obj2).then(res=>{
          console.log(res,'内部验收通过')
           if(res.data.code == 0){
            this.$message.success('已内部验收通过！')
            this.getMybuyGoods()
          }
          
        })
      }
    },
    getAddress(){
      this.$http.httpPost('/user/addressInfo',{openid:this.openid}).then(res=>{
				console.log(res ,'地址');
				if(res.status === 200){
					this.addressList = res.data.data.data
				}
			})
    },
    getMybuyGoods() {
      this.$http.httpPost('/order/productsList', this.queryData).then(res => {
        console.log(res)
        if(res.status == 200){
          let aa = res.data.data 
          aa.forEach(e=>{
            e.products.forEach(m=>{
              let bb = JSON.parse(m.specification)
              let cc = bb.filter(l=>l.id == m.specification_id)[0]
              m.ggName = cc.name
              m.img = cc.img
            })
          })
          this.mybuyList = aa
        }
      })
    },
     whatIclick(type, data) {
      return {
        type,
        data
      }
    },
    lookOrder() {
      this.$router.push({ path: '/orders/ordersList', query: { openid: this.openid } })
    }
  }
}
</script>
<style lang="less" scoped>
.padd20 {
  padding: 0 20px;
}
.d-footer {
  display: flex;
  button {
    flex: 1;
  }
}
</style>
